<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../../js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="addPerson">添加数据</button>
      <button @click="delPerson">删除数据</button>
      <div>{{person}}</div>
    </div>
    <script>

      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            person: {
              name: "孙悟空",
              age: 18,
            },
          };
        },
        methods: {
          addPerson() {
          
            this.$set(this.person, "sex", "男");
            Vue.set(this.person, "homeland", "东胜瀛洲");
            console.log(this.$set === Vue.set); // 结果为true，则说明同一个方法放在两个不同的地方

          
          },

          delPerson(){

            this.$delete(this.person, "age");
            Vue.delete(this.person, "sex");
          },
        },
      });

      /*
      
      set()与delete()小结

      set方法
      作用：给对象添加属性时，使其产生响应式
      参数：参数1：需要添加属性的对象
           参数2：所要添加对象的属性名
           参数3：所要添加对象的属性值
      
     调用形式：
        第一种：this.$set()
        第二种： Vue.set()
      注意：它们是同一个方法放在两个不同的地方

      delete方法
      作用：给对象删除属性时，使其产生响应式
      参数：参数1：需要删除属性的对象
           参数2：所要删除对象的属性名
      
      调用形式：与set()相同
      
      */ 



    </script>
  </body>
</html>
